<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>register</title>
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/register.css" />
	</head>

	<body>
		
		<div class="content">
			<div class="container">
				<div class="row">
					<div class="col-sm-4 col-sm-offset-4 form-box">
						<div class="form-top">
							<div class="form-top-left text-center">
								<h3>注册</h3>
							</div>
						</div>
						<div class="register_content">
							<ul class="nav nav-tabs" role="tablist" id="myTab">
								<li role="presentation" class="active">
									<a href="#phone" role="tab" data-toggle="tab">手机注册</a>
								</li>
								<li role="presentation">
									<a href="#email" role="tab" data-toggle="tab">邮箱注册</a>
								</li>
							</ul>

						</div>
						<div class="form-bottom">
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane active" id="phone">
									<!-- form: -->
									<section>
										<div class="col-sm-12">
											<form id="phoneForm" name="phoneForm" method="post" class="form-horizontal" action="${ctxf}/account/doRegister">
											<input type="hidden"  name="registerType" value="true"/>
												<div class="form-group">
													<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-user"></span></label>
													<div class="col-sm-10">
														<input type="text" class="form-control" name="username" id="phoneUserName" placeholder="用户名" />
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-lock"></span></label>
													<div class="col-sm-10">
														<input type="password" class="form-control" name="passWord" id="phonePassword" placeholder="请输入密码" autocomplete="off"/>
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-lock"></span></label>
													<div class="col-sm-10">
														<input type="password" class="form-control Wdate" name="confirmPassword" id="phoneRepassword" placeholder="请再次输入密码" autocomplete="off"/>
													</div>
												</div>
									
												<div class="form-group">
													<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-phone"></span></label>
													<div class="col-sm-10">
														<input type="text" class="form-control Wdate" name="telNum" id="phonetelphone" placeholder="请输入手机号接收验证码" />
													</div>
												</div>
												<div class="form-group not_feedback">
													<label class="col-sm-2 control-label hidden-xs"></label>
													<div class="col-sm-10">
														<div class="input-group ">
															<input type="text" class="form-control " name="verificationCode" id="phoneCode" placeholder="验证码" />
															<span class="input-group-btn">
																<a  class="btn btn-primary" href="javascript:void(0);" onclick="reloadCode()" id="getPhoneCode" style="margin-top: 0px;">
																	<i class="ti-plus"></i> 获取验证码
																</a>
															</span>
														</div>
													</div>
												</div>
												<div class="form-group not_feedback">
													<div class="col-sm-12">
														<input type="checkbox" name="programs" id="" value="" />
														<a href="#" onclick="registerAgreement();">我已阅读用户协议</a>
													</div>
												</div>
												<div class="form-group">
													<div class="col-sm-12 text-center">
												<%-- 	<a href="${ctxf}/account/getVerificationCode"><h1>测试</h1></a> --%>
														<button type="submit" class="btn btn-primary" >注册</button>
													</div>
												</div>
												<div class="form-group">
													<div class="col-sm-12 text-right">
														<a href="${ctxf}/account/login.html">如果您已注册，可在此登录</a>
													</div>
												</div>
											</form>
											</div>
									</section>
									<!-- :form -->
									</div>
									<div role="tabpanel" class="tab-pane" id="email">
										<!-- form: -->
										<section>
											<div class="col-sm-12">
												<form id="emailForm" name="emailForm" method="post" class="form-horizontal" action="${ctxf}/account/doRegister.do">
												<input type="hidden"  name="registerType" value="false"/>
													<div class="form-group">
														<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-user"></span></label>
														<div class="col-sm-10">
															<input type="text" class="form-control" name="username" id="emailUserName" placeholder="用户名" />
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-lock"></span></label>
														<div class="col-sm-10">
															<input type="password" class="form-control" name="passWord" id="emailPassword" placeholder="请输入密码" autocomplete="off"/>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-lock"></span></label>
														<div class="col-sm-10">
															<input type="password" class="form-control Wdate" name="confirmPassword" id="emailRepassword" placeholder="请再次输入密码" autocomplete="off"/>
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-2 control-label hidden-xs"><span class="glyphicon glyphicon-envelope"></span></label>
														<div class="col-sm-10">
															<input type="text" class="form-control Wdate" name="email" id="emailTelphone" placeholder="请输入邮箱接收验证码" />
														</div>
													</div>
													<div class="form-group not_feedback">
														<label class="col-sm-2 control-label hidden-xs"></label>
														<div class="col-sm-10">
															<div class="input-group">
															<input type="text" class="form-control " name="verificationCode" id="phoneCode" placeholder="验证码" />
																<!-- <input type="text" class="form-control " name="emailCode" id="emailCode" placeholder="验证码" /> -->
																<span class="input-group-btn">
																	<a class="btn btn-primary" href="javascript:void(0);" onclick="reloadCode2()" id="getEmailCode" style="margin-top: 0px;">
																		<i class="ti-plus"></i> 获取验证码
																	</a>
																</span>
															</div>
														</div>
													</div>
													<div class="form-group not_feedback">
														<div class="col-sm-12">
															<input type="checkbox" name="programs" id="" value="" />
															<a href="#" onclick="registerAgreement();">我已阅读用户协议</a>
														</div>
													</div>
													<div class="form-group">
														<div class="col-sm-12 text-center">
															<button type="submit" class="btn btn-primary">注册</button>
														</div>
													</div>
													<div class="form-group">
														<div class="col-sm-12 text-right">
															<a href="${ctxf}/account/login.html">如果您已注册，可在此登录</a>
														</div>
													</div>
												</form>
											</div>
										</section>
										<!-- :form -->
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

		<!--footer start-->
		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>

		<!--footer end-->
	</body>
	
	<script type="text/javascript">
	
		$(document).ready(function() {
			$('#phoneForm').bootstrapValidator({
		        message: 'This value is not valid',
		        feedbackIcons: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		        	'username': {
		                message: 'The username is not valid',
		                validators: {
		                    notEmpty: {
		                        message: '用户名不能为空！'
		                    },
		                    /* stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: '用户名长度必须在6到30位！'
		                    }, */
		                    regexp: {
		                        regexp: /^[A-Za-z0-9]{6,30}$/,
		                        message: '用户名支持数字，字母的组合，6--30位字符长度'
		                    },
		                    remote:{
		     					url:'${ctxf}/account/validateUser',
		     					message:'用户名称已存在',
		     					
		     					type:'POST',
		     				}
		                }
		            },
		            'passWord': {
		                validators: {
		                    notEmpty: {
		                        message: '密码不能为空！'
		                    },
		                    /* stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: '密码长度必须在6到30位！'
		                    }, */
		                    regexp: {
		                        regexp: /^[A-Za-z0-9]{6,30}$/,
		                        message: '密码支持数字，字母的组合，6--30位字符长度'
		                    }
		                }
		            },
		            'confirmPassword': {
		                validators: {
		                	notEmpty: {
		                        message: '密码不能为空！'
		                    },
		                    identical: {
		                        field: 'passWord',
		                        message: '两次输入密码不一致'
		                    }
		                }
		            },
		            'telNum': {
		                validators: {
		                	notEmpty: {
		                        message: '手机号不能为空！'
		                    },
		                	regexp: {
		                        regexp: /^1[3|4|5|8][0-9]{9}$/,
		                        message: '请输入正确的手机号码'
		                    },
		                    remote:{
		     					url:'${ctxf}/account/validateUser',
		     					message:'此手机已被注册，不可再次注册',
		     					
		     					type:'POST',
		     				}
		                }
		            },
		             'verificationCode':{
		            	validators: {
		                	notEmpty: {
		                        message: '验证码不能为空!'
		                    },
		                    remote:{
		     					url:'${ctxf}/account/vlidateCode',
		     					data:function(validator){
		     						return {valnum: $('[name="telNum"]').val()};
		     					},
		     					message:'验证码不正确',
		     					
		     					type:'POST',
		     				}
		                }
		            }, 
		            'programs': {
		                validators: {
		                    choice: {
		                        min: 1,
		                        message: '请勾选我已阅读用户协议'
		                    }
		                }
		            }
		        }
		    }).on('success.form.bv', function (e) {
				e.preventDefault();
				var subitdata = $('#phoneForm').serialize();
				$.ajax({
				     type: 'POST',
					 data:subitdata,	
				     url: "${ctxf}/account/doRegister",
				     success:function(data){
				    	 loginReturnStstus(data);
				     }
				});
			});
			$('#emailForm').bootstrapValidator({
		        message: 'This value is not valid',
		        feedbackIcons: {
		            valid: 'glyphicon glyphicon-ok',
		            invalid: 'glyphicon glyphicon-remove',
		            validating: 'glyphicon glyphicon-refresh'
		        },
		        fields: {
		        	'username': {
		                message: 'The username is not valid',
		                validators: {
		                    notEmpty: {
		                        message: '用户名不能为空！'
		                    },
		                    /* stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: '用户名长度必须在6到30位！'
		                    }, */
		                    regexp: {
		                        regexp: /^[A-Za-z0-9]{6,30}$/,
		                        message: '用户名支持数字，字母的组合，6--30位字符长度'
		                    },
		                    remote:{
		     					url:'${ctxf}/account/validateUser',
		     					message:'用户名称已存在',
		     					
		     					type:'POST',
		     				}
		                }
		            },
		            'passWord': {
		                validators: {
		                    notEmpty: {
		                        message: '密码不能为空！'
		                    },
		                   /*  stringLength: {
		                        min: 6,
		                        max: 30,
		                        message: '密码长度必须在6到30位！'
		                    }, */
		                    regexp: {
		                        regexp: /^[A-Za-z0-9]{6,30}$/,
		                        message: '密码支持数字，字母的组合，6--30位字符长度'
		                    }
		                }
		            },
		            'confirmPassword': {
		                validators: {
		                	notEmpty: {
		                        message: '密码不能为空！'
		                    },
		                    identical: {
		                        field: 'passWord',
		                        message: '两次输入密码不一致'
		                    }
		                }
		            },
		            'email': {
		                validators: {
		                	notEmpty: {
		                        message: '邮箱不能为空！'
		                    },
		                	regexp: {
		                        regexp: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
		                        message: '请输入正确的邮箱'
		                    },
		                    remote:{
		     					url:'${ctxf}/account/validateUser',
		     					message:'此邮箱已被注册，不可再次注册',
		     					
		     					type:'POST',
		     				}
		                }
		            },
		            'verificationCode':{
		            	validators: {
		                	notEmpty: {
		                        message: '验证码不能为空！'
		                    },
		                    remote:{
		                    	url:'${ctxf}/account/vlidateCode',
		                    	data:function(validator){
		     						return {valnum: $('[name="email"]').val()};
		     					},
		     					message:'验证码不正确',
		     					
		     					type:'POST',
		     				}
		                }
		            },
		            'programs': {
		                validators: {
		                    choice: {
		                        min: 1,
		                        message: '请勾选我已阅读用户协议'
		                    }
		                }
		            }
		        }
		    }).on('success.form.bv', function (e) {
				e.preventDefault();
				var subitdata = $('#emailForm').serialize();
				$.ajax({
				     type: 'POST',
					 data:subitdata,	
				     url: "${ctxf}/account/doRegister",
				     success:function(data){
				    	 loginReturnStstus(data);
				     }
				});
				
			});
		});
	
	function loginReturnStstus(data){
		if(data.result==200){
   		     toastr.success("注册成功！");
   		     setTimeout(function(){
				window.location.href = "${ctxf}/account/login.html";
			 },1000);
	   	 }else if(data.result==201){
	   		 toastr.error("二次密码输入不一致！");
	   	 }else if(data.result==202){
	   		 toastr.error("用户名不能为空！");
	   	 }else if(data.result==203){
	   		 toastr.error("电话号码不能为空！");
	   	 }else if(data.result==204){
	   		 toastr.error("邮箱不能为空！");
	   	 }else if(data.result==205){
	   		 toastr.error("验证码不能为空！");
	   	 }else if(data.result==202){
	   		 alert("验证输入正确")
	   	 }
	}
	
	
	 function reloadCode(){
		var phone = $("#phonetelphone").val();
	    if(phone == ''){
	    	layer.msg('请输入手机号');
	    }
	    else{
		//window.location.href="${ctxf}/account/getVerificationCode?telNum="+phone
			$.ajax({
	
			     type: 'POST',
			
			     url: "${ctxf}/account/getVerificationCode?telNum="+phone,
			     success:function(data){
			    	 layer.msg(data);
			    	 if(data != "此手机号已经注册，请登陆"){
			    		 var remainTime = 60;
				 		 var intervalId = setInterval(function() {
				 			remainTime--;
				 			if(remainTime > 0) {
				 				$("#getPhoneCode").html("重新发送（" + remainTime + "）");
				 				$("#getPhoneCode").attr({"disabled":"disabled"});
				 			} else {
				 				clearInterval(intervalId);
				 				$("#getPhoneCode").html("获取验证码");
				 				$("#getPhoneCode").removeAttr("disabled");
				 			}
				 		}, 1000); 
			    	 }
			     }
			});
		}
     } 
	 function reloadCode2(){
		var eamil = $("#emailTelphone").val();
	    if(eamil == ''){
    	layer.msg('请输入邮箱号');
	    }
	    else{
			$.ajax({

			     type: 'POST',
			
			     url: "${ctxf}/account/bindMail?email="+eamil,
			     success:function(data){
			    	 layer.msg(data);
			    	 if(data != "此邮箱已经注册，请登陆"){
			    		 var remainTime = 60;
				 		 var intervalId = setInterval(function() {
				 			remainTime--;
				 			if(remainTime > 0) {
				 				$("#getEmailCode").html("重新发送（" + remainTime + "）");
				 				$("#getEmailCode").attr({"disabled":"disabled"});
				 			} else {
				 				clearInterval(intervalId);
				 				$("#getEmailCode").html("获取验证码");
				 				$("#getEmailCode").removeAttr("disabled");
				 			}
				 		}, 1000);
			    	 }
			     }
			});
		}
    } 

		//注册协议
		function registerAgreement(){
			layer.open({
				title: '注册协议',
				type: 1,
				skin: 'layui-layer-rim', //加上边框
				closeBtn: 1,
				btn: ['同意协议'], //按钮
				/* area: ['30em', '240px'], */ //宽高
				content: '协议内容'
			});
		}
	</script>
</html>